import { useState, useEffect, useRef } from 'react';

const useTextWidth = (text, fontSize, fontFamily) => {
    const [width, setWidth] = useState(0);

    useEffect(() => {
        const span = document.createElement('span');
        span.style.position = 'absolute';
        span.style.visibility = 'hidden';
        span.style.fontSize = `${fontSize}px`;
        span.style.fontFamily = fontFamily;
        span.textContent = text;

        document.body.appendChild(span);
        requestAnimationFrame(() => {
            setWidth(span.clientWidth);
            document.body.removeChild(span);
        });
    }, [text, fontSize, fontFamily]);

    return width;
};
export default useTextWidth;